<template>
	<view>
		<z-nav-bar title="积分详情"></z-nav-bar>
		<view class="item-box flex_fsc">
			<image :src="setting.oss_pub_domain + data.image" class="coures-img"></image>
			<view class="width-100">
				<view class="z-font-32">{{ data.name }}</view>
				<view class="uni-color-grey z-font-24 uni-mt-16">可兑换培训课程</view>
				<view class="flex_sbc uni-mt-22">
					<view class="uni-orange text-w">{{ data.price }}0分</view>
					<view class="z-font-24" style="color: #C4C7CC;">已兑换{{ data.sellEd }}件</view>
				</view>
			</view>
		</view>
		<view class="item-box">
			<view class="text-w z-font-32">详情介绍</view>
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" style="height: 400rpx;">
				<swiper-item v-for="img in data.image" :key="img">
					<image :src="setting.oss_pub_domain + img" mode="aspectFit" class="introduce_image"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="item-box">
			<view class="text-w z-font-32">使用有效期</view>
			<view class="uni-color-grey uni-mt-20" style="line-height: 40rpx;">{{ data.expireDateDesc }}</view>
		</view>
		<view class="item-box">
			<view class="text-w z-font-32">商品介绍</view>
			<view class="uni-mt-40">使用说明</view>
			<view class="uni-color-grey uni-mt-14">1.仅限于兑换指定商品，每张抵用券只可使用一次不可找零，不得转让，不能兑换现金，不再开具发票，不可与其他优惠活动同时使用。</view>
			<view class="uni-mt-40">注意事项</view>
			<view class="uni-color-grey uni-mt-14">成功兑换后，在>全部订单"，通过兑换订单查看信息。</view>
		</view>
		<bottom-box :buts="buts" @change="immediatelyChange"></bottom-box>
	</view>
</template>

<script setup>
import { getProductDetail, getProductOrder } from "@/api/integral.js"
import { onLoad } from '@dcloudio/uni-app'
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance()

const data = reactive({
	id: 0
})
onLoad(opt => {
	data.id = opt.id
	fetchData()
})
function fetchData() {
	getProductDetail(data.id).then(res => {
		Object.assign(data, res)
		if (data.image) data.image = data.image.split(',')
		console.log(data);
	})
}

const buts = [{
	label: '立即兑换',
	bgColor: 'uni-color-main-bg'
}]

function immediatelyChange() {
	getProductOrder(data.id).then(res => {
		that.tools.alert('兑换成功')
	})
}

</script>

<style lang="scss">
	page {
		background: $uni-F5F5F5;
		padding: 32rpx;
	}
</style>
<style lang="scss" scoped>
	.item-box {
		width: 686rpx;
		box-sizing: border-box;
		padding: 32rpx;
		border-radius: 24rpx;
		background: $uni-white;
		margin-bottom: 20rpx;
		.coures-img {
			width: 220rpx;
			height: 148rpx;
			border-radius: 10rpx;
			flex-shrink: 0;
			margin-right: 24rpx;
			background: #F5F5F5;
		}
		.introduce_image {
			width: 622rpx;
			height: 350rpx;
			border-radius: 24rpx;
			margin-top: 32rpx;
		}
	}
</style>
